<template>
  <view class="payment-record">
    <!-- 顶部导航栏（包含tab） -->
    <view class="status-bar" :style="{height: navHeight + 'px', 'padding-top': statusBarHeight + 'px'}">
      <view class="nav-bar">
        <!-- 返回按钮和标题 -->
        <view class="nav-header">
          <view class="nav-bar-left">
            <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
          </view>
          <view class="nav-bar-title">支付记录</view>
          <view class="nav-bar-right"></view>
        </view>
        
        <!-- Tab栏 -->
        <view class="nav-tabs">
          <view class="nav-tab-item" :class="{ 'active': activeTab === 'monthly' }" @click="switchTab('monthly')">
            <text class="nav-tab-text">月卡</text>
            <view class="nav-tab-indicator" v-if="activeTab === 'monthly'"></view>
          </view>
          <view class="nav-tab-item" :class="{ 'active': activeTab === 'yearly' }" @click="switchTab('yearly')">
            <text class="nav-tab-text">年卡</text>
            <view class="nav-tab-indicator" v-if="activeTab === 'yearly'"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area" :style="{ 'margin-top': navHeight + 'px' }">
      <!-- 支付记录表格 -->
      <view class="record-table-container">
        <view class="record-table" v-if="filteredRecords.length > 0">
          <!-- 表格头部 -->
          <view class="table-header">
            <view class="header-cell time-cell">充值时间</view>
            <view class="header-cell amount-cell">金额</view>
            <view class="header-cell expire-cell">有效期至</view>
          </view>
          
          <!-- 表格内容 -->
          <view class="table-body">
            <view class="table-row" v-for="(item, index) in filteredRecords" :key="index">
              <view class="body-cell time-cell">{{ item.time }}</view>
              <view class="body-cell amount-cell">{{ item.amount }}</view>
              <view class="body-cell expire-cell">{{ item.expireDate }}</view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-else>
          <image src="/static/empty-record.png" class="empty-icon" />
          <text class="empty-text">暂无支付记录</text>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
export default {
  name: 'PaymentRecord',
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      activeTab: 'monthly', // 当前选中的tab
      recordList: [
        // 示例数据，实际使用时从接口获取
        {
          id: 1,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 2,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 3,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 4,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 5,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 6,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 7,
          type: 'monthly',
          amount: '99',
          time: '09-15 16:26',
          expireDate: '2025.10.15'
        },
        {
          id: 8,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 9,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 10,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 11,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 12,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 13,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 14,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 15,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 16,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 17,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 18,
          type: 'yearly',
          amount: '1999',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 19,
          type: 'yearly',
          amount: '1000',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        },
        {
          id: 120,
          type: 'yearly',
          amount: '199',
          time: '09-10 10:20',
          expireDate: '2025.09.10'
        }
      ]
    }
  },
  computed: {
    // 根据当前tab过滤记录
    filteredRecords() {
      return this.recordList.filter(item => item.type === this.activeTab);
    }
  },
  onLoad() {
    //获取手机系统的信息（主要是获取状态栏和胶囊的高度）
    let {
      statusBarHeight,
      system
    } = uni.getSystemInfoSync()
    this.statusBarHeight = statusBarHeight
    // 增加导航栏高度以容纳标题和tab
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 88 : 92)
    
    // 加载支付记录数据
    this.loadPaymentRecords();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 切换tab
    switchTab(tabType) {
      this.activeTab = tabType;
      console.log('切换到:', tabType === 'monthly' ? '月卡' : '年卡');
    },

    // 加载支付记录
    loadPaymentRecords() {
      // 这里可以添加接口调用逻辑
      console.log('加载支付记录');
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.payment-record {
  width: 100vw;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .nav-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 16rpx;

    // 第一行：返回按钮和标题
    .nav-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 88rpx;
      position: relative;

      .nav-bar-left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88rpx;
        height: 88rpx;
        margin-left: 16rpx;

        .nav-back-icon {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .nav-bar-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 1;
        margin-bottom: 10rpx;
      }

      .nav-bar-right {
        width: 88rpx;
        height: 88rpx;
        margin-right: 16rpx;
      }
    }

    // 第二行：tab栏
    .nav-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 156px;
      padding-top: 8rpx;

      .nav-tab-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;

        .nav-tab-text {
          font-size: 32rpx;
          font-weight: 500;
          color: #999999;
          transition: all 0.3s ease;
        }

        &.active .nav-tab-text {
          color: #0C92FF;
          font-weight: 600;
        }

        .nav-tab-indicator {
          position: absolute;
          bottom: -8rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 48rpx;
          height: 6rpx;
          background-color: #0C92FF;
          border-radius: 3rpx;
        }
      }
    }
  }
}

// 内容区域
.content-area {
  position: relative;
  background-color: #f8f8f8;
  min-height: calc(100vh - 220rpx);
  padding-top: 32rpx;
}

// 记录表格样式
.record-table-container {
  // padding: 0 32rpx;
  box-sizing: border-box;
}

.record-table {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

// 表格头部
.table-header {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #e9ecef;
}

.header-cell {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
  line-height: 1.2;
}

// 表格主体
.table-body {
  background-color: #FFFFFF;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.body-cell {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  line-height: 1.2;
}

// 列宽度调整
.time-cell {
  flex: 1.2;
}

.amount-cell {
  flex: 0.8;
}

.expire-cell {
  flex: 1.2;
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 32rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  line-height: 1.2;
}

// 移动端适配
/* #ifdef APP-PLUS */
.nav-back-icon,
.nav-tab-item {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
/* #endif */

/* #ifdef H5 */
.nav-back-icon:hover,
.nav-tab-item:hover {
  opacity: 0.8;
}
/* #endif */

// 响应式适配
@media screen and (max-width: 750rpx) {
  .status-bar .nav-bar {
    padding-bottom: 12rpx;
  }
  
  .nav-header {
    height: 80rpx !important;
  }
  
  .nav-bar-title {
    font-size: 32rpx;
  }
  
  .nav-tab-text {
    font-size: 28rpx;
  }
  
  .nav-tabs {
    gap: 40rpx;
    padding-top: 6rpx;
  }
  
  .table-header {
    padding: 20rpx 0;
  }
  
  .table-row {
    padding: 28rpx 0;
  }
  
  .header-cell {
    font-size: 26rpx;
  }
  
  .body-cell {
    font-size: 26rpx;
  }
  
  .empty-text {
    font-size: 26rpx;
  }
}
</style>